<template>
	<view>
		<u-navbar title="家族辈分" :autoBack="true">
		</u-navbar>
		<view class="container">

			<view class="list" v-for="v in list" :key="v.id">
				<view class="item">
					<view class="top">
						<view class="left">
							{{v.level_name}} <text style="color: #91929E;font-weight: 700;padding-left: 12rpx;"
								v-if="v.upgraderule.length">{{v.upgraderule.filter(e=>e.is_done).length}}/{{v.upgraderule.length}}</text>
						</view>
						<view :class="v.status=='done'?'right_finash':v.status=='onprogress'?'right_ing':'right_no'">
							{{v.status|fnName}}
						</view>
					</view>
					<view class="title" v-if="v.upgraderule.length">条件</view>
					<view class="midd">
						<template v-for="(item,i) in v.upgraderule">
							<view
							style="margin: 32rpx 0;display: flex;align-items: center;background-color: #fff;justify-content: space-between;border-radius: 8rpx;"
							>
								<view>
									<view class="tui" style="border-radius: 8rpx;">
										<view class="l1">
											{{item.type_desc}}
											<!--
											{{item.type_text}}达到{{item.amount}}人
											<span v-if="v.status == 'onprogress'">
												,当前达到{{item.current_amount}}人
											</span>
											-->
										</view>
									</view>
									<view
										v-if="item.reach_detail&&item.reach_detail.length">
										<view>
											<view class="chrild" v-for="_item,index in item.reach_detail">
												<view class="l1">
													{{_item.reach_desc}}
													<!--
													{{_item.level_name}}需{{_item.amount}}人
													<span v-if="v.status == 'onprogress'">
														,当前达到{{_item.reach_amount}}人
													</span>
													-->
												</view>
									
											</view>
										</view>
										
									</view>
								</view>
								<view class="r1" style="padding-right: 12rpx;">
									<u-icon name="checkbox-mark" color="#00D097" v-if="item.is_done==1"></u-icon>
									<u-icon name="checkbox-mark" color="#dfdfdf" v-else></u-icon>
								</view>
							</view>

							
						</template>
					</view>
					<view class="midd" v-if="v.level == 3">
						<view class="l1">
							我就是超田品牌方，超田是我家，人人都爱家。
						</view>
						<view class="l1">
							{{v.total_desc}}
						</view>
					</view>
					<view class="title">权益</view>
					<view class="midd">
						<view class="l1">
							{{v.desc}}
						</view>
					</view>
					<!-- 一共3级，到了最后一级不显示升级button -->
					<view class="but" @click="upLevle(v)" v-if="v.level > 3"> 
						<view class="s2" :class="{'bg-gren':!v.upgrade_button_enabled}">
							<text>更多责任与付出</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		levelInfo_api,
		doLevelUpgrade_api
	} from '@/api/second.js'
	export default {
		data() {
			return {
				list: []
			}
		},
		filters: {
			fnName(value) {
				const data = {
					done: '已完成',
					nostart: '未开始',
					onprogress: '当前辈分',
				}
				return data[value]
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				levelInfo_api().then(res => {
					this.list = res.data
				})
			},
			upLevle(v) {
				if (!v.upgrade_button_enabled) return
				uni.showModal({
					title: '温馨提示',
					content: '请再次确认是否升级当前权益',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '升级中'
							})
							doLevelUpgrade_api({
								level: v.id
							}).then((res) => {
								if (1 == res.code) {
									this.$u.toast(res.msg)
									this.getInfo()
								}
							}).finally(() => {
								uni.hideLoading()
							})
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		margin: 40rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		opacity: 1;

		.list {
			padding: 20rpx 40rpx;

			&:first-child {
				padding-top: 40rpx;
			}

			&:last-child {
				padding-bottom: 40rpx;
			}

			.item {
				padding: 40rpx;
				background: #F4F9FD;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				opacity: 1;
				font-size: 28rpx;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 46rpx;

					.left {
						font-weight: 700;
						color: #000000;
					}

					.right_finash {
						font-size: 24rpx;
						font-weight: 700;
						color: #00D097;
						width: 118rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						background: #E0F9F2;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
					}

					.right_ing {
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 700;
						color: #7677EB;
						text-align: center;
						width: 118rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: rgba(118, 119, 235, 0.1);
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
					}

					.right_no {
						font-size: 24rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 700;
						color: #c3cbc9;
						text-align: center;
						width: 118rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: #e7e7e7;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
					}

				}

				.title {
					font-weight: 400;
					color: #91929E;
					margin-bottom: 32rpx;
				}

				.midd {

					margin-bottom: 32rpx;

					.tui {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 12rpx 12rpx 8rpx;
						background-color: rgba(255, 255, 255, 0.6);
					}

					.l1 {
						padding-right: 20rpx;
						font-weight: 400;
						color: #000000;
					}

					.chrild {
						background-color: rgba(255, 255, 255, 0.6);
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 8rpx 12rpx;

						&.chrild:first-child {
							padding-top: 12rpx;
						}

						&.chrild:last-child {
							padding-bottom: 12rpx;
						}

						.l1 {
							padding-right: 20rpx;
							font-weight: 400;
							color: #000000;
						}
					}
				}

				.but {
					@include flex;
					margin-top: 40rpx;

					.s2 {
						width: 290rpx;
						height: 96rpx;
						background: #7677EB;
						box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
						border-radius: 28rpx;
						margin: 0 auto;
						text-align: center;

						text {
							font-size: 30rpx;
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 96rpx;
						}
					}
				}
			}
		}
	}

	.bg-gren {
		background-color: #bdbdc0 !important;
	}
</style>